<template>
  <div class="taskCircumstance" id="taskParticulars">
    <div class="commentCell">
      <div class="cellLeft">
        <div class="cellIcon">
          <img :src="cellData.avatarUrl" lazy-load>
        </div>
      </div>
      <div class="cellRight">
        <div class="cellName">{{cellData.nickName}}</div>
        <div class="cellTime">{{cellData.create_time}}·累计打卡{{cellData.sign_in || 0}}次</div>

        <div class="cellTitle">DAY {{cellData.section_day}} {{cellData.section_name}}</div>
        <div class="cellContent" v-for="(itemContent, indexContent) in cellData.content" :key="indexContent">
          <div class="contentText" v-if="itemContent.status === 0">{{itemContent.content}}</div>
          <div class="contentMedia" v-if="itemContent.status === 1 && itemContent.state === 0">
            <scroll-view class="mediaList" scroll-x style="width: auto;overflow:hidden;transform:translateZ(1px)">
              <div class="mediaCell" v-for="(itemMedia, indexMedia) in itemContent.content" :key="indexMedia" 
                :style="{'background-image' : itemMedia.status === 10? 'url(http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_capture_square%402x.png)': 'url('+ itemMedia.content +')'}" 
                @click="previewImageList(itemMedia, itemContent.content)">
                  <div class="videoBtn" v-if="itemMedia.status === 10">
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_play%402x.png" lazy-load>
                  </div> 
              </div>
            </scroll-view>
          </div>
          <div class="contentVideo" v-if="itemContent.status === 1 && itemContent.state === 1">
            <div class="videoBox" v-for="(itemMedia, indexMedia) in itemContent.content" :key="indexMedia" @click="transmitMovies(itemMedia)">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_capture%402x.png" mode="aspectFill" v-if="!itemMedia.content">
              <img :src="itemMedia.content" mode="aspectFill" v-if="itemMedia.content">
              <div class="videoBtn">
                <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_play%402x.png" lazy-load>
              </div>   
            </div>
          </div>
          <div class="contentAudio" v-if="itemContent.status === 2">
            <audioModule :audioData="itemContent" @audioeNotice="audioeMeans"></audioModule>
          </div>
        </div>

        <div class="cellDiscuss">
          <div class="discussButton" @click.stop.prevent="operateCommmentDiscuss(cellData, index)">
            <div class="discussIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fcomments%402x.png" lazy-load>
            </div>
            <div class="discussText">评论</div>
          </div>
          <div class="opinionButton" @click.stop.prevent="operateCommmentPraise(cellData, index)">
            <div class="opinionIcon" v-if="cellData.status === 0">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter/cheer@2x.png" lazy-load>
            </div>
            <div class="opinionIcon" v-if="cellData.status === 1">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter/like@2x.png" lazy-load>
            </div>
            <div class="opinionText">加油 {{cellData.praise > 0 ? cellData.praise: ''}}</div>
          </div>
          <div class="teacherReviews" v-if="cellData.teach" @click.stop.prevent="operateOpinionReply(cellData, index)">
            <span class="teacherName">{{cellData.teacher_name}}</span>点评：<span class="reviewsText">{{cellData.teach}}</span>
          </div>
          <div class="commentContent" v-if="cellData.comment && cellData.comment.length !== 0">
            <div class="commentLine" v-for="(itemLine, indexLine) in cellData.comment" :key="indexLine" @click.stop.prevent="operateCommmentReply(itemLine, index)">
              <div class="discussLine" v-if="itemLine.to_uid === itemLine.from_id">
                <span>{{itemLine.to_name}}：</span>{{itemLine.back_comment}}
              </div>
              <div class="replyLine" v-if="itemLine.to_uid !== itemLine.from_id">
                <span>{{itemLine.to_name}} </span>回复<span>{{itemLine.from_name}}：</span>{{itemLine.back_comment}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  removeCommmentContent,
  obtainTaskCircumstance,
  likeTaskCircumstance
} from '@/config/api'
import {commentRegExp} from '@/config/mUtils'
import {showMessager, showPictureCard} from '@/config/wUtils'
import {remidnUserSocketBadge} from '@/config/vuexUtils'
import audioModule from '@/components/audio'
export default {
  components:{audioModule},
  data () {
    return {
      // 作业id
      taskId: '',
      // 学员id
      studentId: '',
      // 作业单元 数据
      cellData: [],
      // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
      commentStatus: 0,
      // 评论 数据包
      commentPacket: {},
      // 作业类型 1 作业详情  2 我的作业
      taskStatus: 0,
      // 用户id
      openId: '',
      // 用户唯一id
      unionId: '',

      // // 用户头像
      // userAvatar: '',
      // // 用户呢称
      // userName: '',
      // // 课程天数
      // sectionDay: '',
      // // 课程标题
      // sectionTitle: ''
    }
  },
  
  mounted () {
    let self = this
    // 初始化 作业详情 界面
    self.initTaskCircumstance();
  },
  methods: {
    // 初始化 作业详情 界面
    async initTaskCircumstance() {
      let self = this;
      if (self.$root.$mp.query.job_id && self.$root.$mp.query.status) {
        console.log(self.$root.$mp.query.status, '...self.$root.$mp.query.status')
        // 作业id
        self.taskId = self.$root.$mp.query.job_id
        // 作业类型 1 作业详情  2 我的作业
        self.taskStatus = self.$root.$mp.query.status
        if (self.taskStatus === '1') {
          // 页面标题
          wx.setNavigationBarTitle({
            title: '作业详情'
          })
        }
        if (self.taskStatus === '2') {
          // 页面标题
          wx.setNavigationBarTitle({
            title: '我的作业'
          })
        }
        const userInfo = await wx.getStorageSync('userInfo')
        if (JSON.stringify(userInfo) != '[]') { 
          // 用户id
          self.openId = userInfo.openId
          // 用户唯一id
          self.unionId = userInfo.unionId
        }
        // 获取 作业详情 数据
        self.acquireTaskCircumstanceData()
      }
    },

    // 获取 作业详情 数据
    async acquireTaskCircumstanceData () {
      console.log('获取 作业详情 数据')
      let self = this;
      // 作业单元 数据
      self.cellData = []
      wx.showNavigationBarLoading()
      // 学员id
      self.studentId = await wx.getStorageSync('student_id')
      if (self.taskId) {
        let taskInfo = await obtainTaskCircumstance(self.studentId, self.taskId)
        // 清空 本地 重新加载
        wx.removeStorageSync('comment_success')
        if (taskInfo.status === 200) {
          if (self.taskStatus === '1') {
            // 评论成功
            wx.setStorageSync("comment_success", 1);
          }
          console.log(taskInfo , '...获取 作业详情 数据..........')
          taskInfo.data.create_time = commentRegExp ((taskInfo.data.create_time-0))
          let audioFlag = false
          for (let i=0; i<taskInfo.data.content.length; i++) {
            if (taskInfo.data.content[i].status === 2) {
              audioFlag = true
            }
          }
          if (!audioFlag) {
            taskInfo.data.content = await taskInfo.data.content.reverse()
          }
          // 作业单元 数据
          self.cellData = taskInfo.data
          // // 用户头像
          // self.userAvatar = self.cellData.avatarUrl
          // // 用户呢称
          // self.userName = self.cellData.nickName
          // // 课程天数
          // self.sectionDay = self.cellData.section_day
          // // 课程标题
          // self.sectionTitle = self.cellData.section_name
          // self.cellData.content = self.cellData.content.reverse()
          // self.cellData.create_time = commentRegExp ((self.cellData.create_time-0))
        }
        console.log(taskInfo , '...获取 作业详情 数据')
      }
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },
    

    // 操作评论 --- 初始化
    operateCommmentInit () {
      console.log('操作评论 --- 初始化')
      let self = this;
      // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
      self.commentStatus = 0
      // 评论 数据包
      self.commentPacket = {}
    },

    // 操作评论 --- 评论
    operateCommmentDiscuss (item, index) {
      console.log('操作评论 --- 评论')
      let self = this;
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
      self.commentStatus = 0
      // 评论 数据包
      self.commentPacket = {
        job_id: item.job_id,
        to_uid: wx.getStorageSync('student_id'),
        from_id: wx.getStorageSync('student_id'),
        comment_status:  self.commentStatus,
        release_text: '评论 ',
        peer_id: item.student_id
      }
      wx.navigateTo({
        url: '../commentTask/main?commentPacket='+JSON.stringify(self.commentPacket)
      }) 
    },

    // 操作点评 --- 回复
    operateOpinionReply (item, index) {
      let self = this;
      console.log(item, '.....操作点评 --- 回复')
      // if (wx.getStorageSync('student_id') === item.teacher_id) {

      // if (self.openId === item.t_open_id) {
      
      if (self.unionId === item.t_union_id) {
        showMessager('不可回复自己的点评')
        return;
      }
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
      self.commentStatus = 1
      // 评论 数据包
      self.commentPacket = {
        job_id: item.job_id,
        to_uid: wx.getStorageSync('student_id'),
        from_id: item.teacher_id,
        comment_status:  self.commentStatus,
        release_text: '@ '+item.teacher_name,
        peer_id: item.teacher_id
      }
      wx.navigateTo({
        url: '../commentTask/main?commentPacket='+JSON.stringify(self.commentPacket)
      })  
    },

    // 操作评论 --- 回复
    operateCommmentReply (item, index) {
      let self = this;
      console.log(item, '....操作评论 --- 回复')
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 判断 回复 or 删除
      // if (wx.getStorageSync('student_id') !== item.to_uid) {

      // if (self.openId !== item.open_id) {

      if (self.unionId !== item.union_id) {
        // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
        self.commentStatus = 1
        // 评论 数据包
        self.commentPacket = {
          job_id: item.job_id,
          to_uid: wx.getStorageSync('student_id'),
          from_id: item.to_uid,
          comment_status:  self.commentStatus,
          release_text: '@ '+item.to_name,
          peer_id: item.to_uid
        }
        wx.navigateTo({
          url: '../commentTask/main?commentPacket='+JSON.stringify(self.commentPacket)
        })   
      }else{
        wx.showActionSheet({
          itemList: ['删除'],
          itemColor: '#ee3a29',
          success: function(res) {
            console.log(res.tapIndex)
            if (res.tapIndex === 0){
              // 操作评论 --- 删除
              self.operateCommmentDelete(item)
            }
          },
          fail: function(res) {
            console.log(res.errMsg)
          }
        })
      }
    },

    // 操作评论 --- 删除
    operateCommmentDelete (item) {
      let self = this;
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      console.log(item, '操作评论 --- 删除')
      // 删除 评论 -- 内容
      self.cancelCommmentContent(item)
    },

    // 删除 评论 -- 内容
    async cancelCommmentContent (item) {
      let self = this;
      wx.showNavigationBarLoading()
      let commmentInfo = await removeCommmentContent(item.to_uid, item.comment_id)    
      if (commmentInfo.status === 200) {
        // 获取 作业详情 数据
        await self.acquireTaskCircumstanceData ()
        showMessager('删除成功')
      }
      console.log(commmentInfo, '....评论内容')
      wx.hideNavigationBarLoading()
    },

    

    // 点赞 作业详情 数据
    async praiseTaskCircumstanceData (peer_id) {
      let self = this;
      wx.showNavigationBarLoading()
      // 学员id
      self.studentId = await wx.getStorageSync('student_id')
      let taskInfo = await likeTaskCircumstance(self.studentId, self.taskId)
      if (taskInfo.status === 200) {
        if (self.taskStatus === '1') {
          // 评论成功
          wx.setStorageSync("comment_success", 1);
        }
        self.cellData['praise'] = taskInfo.data
        self.cellData['status'] = taskInfo.state
        remidnUserSocketBadge(peer_id)
        console.log(self.cellData, '点赞 作业详情 数据')
      }
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },

    // 操作评论 --- 点赞
    async operateCommmentPraise (item, index) {
      let self = this;
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
      self.commentStatus = 0
      // 点赞 作业详情 数据
      await self.praiseTaskCircumstanceData(item.student_id)
    },


    // 展示 图片列表
    previewImageList(item, itemList) {
      let self = this;
      if (item.status === 11){
        let imageList = []
        itemList.forEach( (itemCell, index) => {
          console.log(itemCell, '......展示图片列表')
          if (itemCell.status === 11) {
            imageList.push(itemCell.content)
          }
        });
        showPictureCard(item.content, imageList)
      }else{
        // 播放 视频
        self.transmitMovies (item)
      }
    },

    // 播放 视频
    transmitMovies (item) {
      let self = this;
      console.log('播放 视频', item)
      // self.$emit("commentVideo", item);
      if (item) {
        wx.navigateTo({
          url: '../commentVideo/main?comment_video='+item.url
        })
      }
    },
    // 初始化 多媒体
    initMultimedia(){
      let self = this;
      // 评论 多媒体
      // if (self.commentData) {
      //   self.commentData.forEach((itemComment, indexComment) => {
          self.cellData.content.forEach((itemContent, indexContent) => {
            if (itemContent.status === 1) {
              itemContent.content.forEach((itemMedia, indexMedia) => {
                if (itemMedia.status === 10) {
                  itemMedia.play = 0
                }
              } )
            }
            if(itemContent.status === 2){
              itemContent.play = 0
            }
          })  
      //   })
      // }
    },
    // audio组件 触发的方法
    audioeMeans (item) {
      let self = this;
      if (!item.play) {
        // 初始化 多媒体
        self.initMultimedia()
        item.play = 1
        console.log(item, self.cellData, '....audio组件')
      } else {
        // 初始化 多媒体
        self.initMultimedia()
      }
    },

    
  },


  // 下拉刷新
  onPullDownRefresh() {
    let self = this;
    console.log('下拉刷新')
    // // 初始化 多媒体
    // self.initMultimedia()
    // 初始化 作业详情 界面
    self.initTaskCircumstance();
  },
  // 页面展示
  async onShow () {
    let self = this;
    console.log('页面展示 ....')
    const refreshTask = wx.getStorageSync('comment_success')
    console.log(refreshTask, '.......refreshTask')
    if (refreshTask === 1) {
      // 获取 作业详情 数据
      await self.acquireTaskCircumstanceData ()
      // // 清空 本地 重新加载
      // wx.removeStorageSync('score_load')
      // // 作业单元 数据
      // self.taskData[self.taskIndex] = self.cellData 
    }
  },
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.taskCircumstance{
  width: 100%;
  height: 110%;
  background: #ffffff;
  // position: relative;
  .commentCell{
      // padding: 20rpx 32rpx 25rpx 32rpx;
      padding: 20rpx 32rpx 0rpx 32rpx;
      border-bottom: 1rpx solid #EAEAEA;
      &:last-child{
        border-bottom: none;
      }
      .cellLeft{
        display: inline-block;
        vertical-align: top;
        .cellIcon{
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 20rpx;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .cellRight{
        display: inline-block;
        vertical-align: top;
        width: 586rpx;
        padding-top: 10rpx;
        .cellName{
          font-family: PingFangSC-Medium;
          font-size: 30rpx;
          color: #666666;
          letter-spacing: 0.61px;
          line-height: 1;
          width: 80%;
          white-space: nowrap;
          overflow: hidden;
          /* 文本超出变省略号 */
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .cellTime{
          font-family: PingFangSC-Regular;
          font-size: 22rpx;
          color: #999999;
          letter-spacing: 0.7rpx;
          line-height: 1;
          margin-top: 13rpx;
        }
        .cellTitle{
          font-family: PingFangSC-Regular;
          font-size: 34rpx;
          color: #333333;
          letter-spacing: 1.24rpx;
          width: 100%;
          height: 48rpx;
          line-height: 48rpx;
          margin-top: 13rpx;
          white-space: nowrap;
          overflow: hidden;
          /* 文本超出变省略号 */
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .cellContent{
          .contentText{
            // font-family: PingFangSC-Regular;
            // font-size: 30rpx;
            // color: #333333;
            // letter-spacing: 0.61rpx;
            // line-height: 42rpx;
            // margin-top: 20rpx;
            font-family: PingFangSC-Regular;
            font-size: 28rpx !important;
            color: #666666 !important;
            letter-spacing: 1.02rpx !important;
            line-height: 40rpx !important;
            margin-top: -10rpx !important;
            margin-bottom: 11rpx !important;
          }
          .contentMedia{
            height: 188rpx;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: 20rpx;
            .mediaList {
              font-size: 0;
              .mediaCell {
                  display: inline-block;
                  width: 188rpx;
                  height: 188rpx;
                  position: relative;
                  border-radius: 10rpx;
                  background-repeat: no-repeat;
                  background-position: center center;
                  background-size: cover;
                  position: relative;
                  & + .mediaCell {
                      margin-left: 10rpx;
                  }
                  .time {
                      position: absolute;
                      bottom: 0;
                      width: 100%;
                      font-family: PingFangSC-Light;
                      font-size: 24rpx;
                      color: #ffffff;
                      text-align: center;
                  }
                  .videoBtn{
                    position: absolute;
                    width: 80rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    top: 54rpx;
                    left: 54rpx;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                  }
              }
            }
          }
          .contentVideo{
            width: 400rpx;
            height: 230rpx;
            // margin-top: 20rpx;
            margin-top: 0 !important;
            margin-bottom: 21rpx !important;
            .videoBox{
              width: 100%;
              height: 100%;
              position: relative;
              video{
                width: 100%;
                height: 100%;
              }
              img{
                width: 100%;
                height: 100%;
              }
              .videoBtn{
                position: absolute;
                width: 80rpx;
                height: 80rpx;
                line-height: 80rpx;
                top: 75rpx;
                left: 160rpx;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .contentAudio{
            width: 586rpx;
            height: 120rpx;
            margin-bottom: 28rpx;
          }
        }

        .cellDiscuss{
          .discussButton{
            line-height: 1;
            // padding-top: 20rpx;
            // padding-bottom: 25rpx;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            height: 30rpx !important;
            line-height: 30rpx !important;
            display: inline-block;
            vertical-align: middle;
            margin-right: 22rpx;
            .discussIcon{
              display: inline-block;
              vertical-align: middle;
              width: 22.1rpx;
              height: 20.9rpx;
              line-height: 20.9rpx;
              // margin-right: 9.1rpx;
              img{
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .discussText{
              display: inline-block;
              vertical-align: middle;
              font-family: PingFangSC-Regular;
              font-size: 22rpx;
              color: #666666;
              letter-spacing: 0.67rpx;
              line-height: 1;
              margin-left: 9.1rpx;
            }
          }

          .opinionButton{
            // line-height: 1;
            // padding-top: 20rpx;
            // padding-bottom: 25rpx;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            height: 30rpx !important;
            line-height: 30rpx !important;
            display: inline-block;
            vertical-align: middle;
            // margin-right: 22rpx;
            .opinionIcon{
              display: inline-block;
              vertical-align: middle;
              width: 21.4rpx;
              height: 19.9rpx;
              line-height: 19.9rpx;
              // margin-right: 9.1rpx;
              img{
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .opinionText{
              display: inline-block;
              vertical-align: middle;
              font-family: PingFangSC-Regular;
              font-size: 22rpx;
              color: #666666;
              letter-spacing: 0.67rpx;
              line-height: 1;
              margin-left: 8rpx;
            }
          }

          .teacherReviews{
            font-family: PingFangSC-Regular;
            font-size: 26rpx;
            color: #999999;
            letter-spacing: 0.91rpx;
            line-height: 40rpx;
            background: rgba(255,180,151,0.20);
            border: 1rpx solid rgba(254,122,114,0.30);
            border-radius: 4rpx;
            padding: 20rpx;
            word-break: break-all;
            // margin-bottom: 20rpx;
            margin-bottom: 0 !important;
            margin-top: 15rpx !important;
            .teacherName{
              font-family: PingFangSC-Regular;
              font-size: 26rpx;
              color: #446191;
              letter-spacing: 1.29rpx;
              margin-right:5px;
            }
            .reviewsText{
              font-family: PingFangSC-Regular;
              font-size: 26rpx;
              color: #EBA844;
              letter-spacing: 1.29rpx;
            }
          }
          .commentContent{
            // margin-bottom: 25rpx;
            background: #F5F5F5;
            padding: 20rpx;
            margin-top: 20rpx !important;
            margin-bottom: 0 !important;
            .commentLine{
              margin-top: 8rpx;
              div{
                font-family: PingFangSC-Regular;
                font-size: 26rpx;
                color: #151515;
                letter-spacing: 0.53rpx;
                line-height: 37rpx;
                word-break: break-all;
                span{
                  font-family: PingFangSC-Regular;
                  font-size: 26rpx;
                  color: #446191;
                  letter-spacing: 0.53rpx;
                }
              }
              .discussLine{}
              .replyLine{}
            }
          }
        }
      }
    }
    .commentLoading{
      width:100%;
      text-align:center;
      font-family:PingFangSC-Regular;
      font-size:26rpx;
      color:#999999;
      letter-spacing:0.7rpx;
      line-height:1;
      margin-top:-1rpx;
      padding-bottom:30rpx;
      padding-top: 13rpx;
      background-color: #fff;
    }
}
</style>
